<!--自查车辆登记表-->
<template>
  <div class="public-common">
    <div class="public-title">自查车辆登记表列表</div>
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="报表月份">
            <el-date-picker style="width: 100%;" format="yyyy/MM/dd" value-format="yyyy/MM/dd" v-model="form.yue" type="date"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称">
            <el-input v-model="form.ming" placeholder="请输入搜索关键词进行快速搜索"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" icon="el-icon-search" style="margin-left:10px;">搜索</el-button>
          <el-button type="primary" icon="el-icon-tickets" @click="dialogVisible=true">新建</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tabledata" size="mini" border stripe header-row-class-name="textcenter">
      <el-table-column label="报表月份" fixed="left" prop="a1">
      </el-table-column>
      <el-table-column label="上报日期" prop="a2">
      </el-table-column>
      <el-table-column label="检查地点" prop="a3">
      </el-table-column>
      <el-table-column label="检查人" prop="a4">
      </el-table-column>
      <el-table-column label="检查车数" prop="a5">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.now"
      :page-sizes="page.sizes" :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
      style="margin-top:10px;">
    </el-pagination>
    <el-dialog title="自查车辆登记表" :visible.sync="dialogVisible" width="50%">
      <el-form :model="editForm" ref="editForm" label-width="80px" class="qysb-form-f">
        <el-scrollbar style="height:100%;">
          <div class="fuwukab" style="background: none; color: #d21706; margin-bottom: 0;">请于次月5日之前上报本月报表</div>
          <div class="fuwukab">西安市出租汽车行业单位自查车辆登记表</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位" class="cyqlabel">
                <el-input size="small" v-model="editForm.zicha1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地点" class="cyqlabel">
                <el-input size="small" v-model="editForm.zicha2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="日期" class="cyqlabel">
                <el-date-picker style="width: 100%;" format="yyyy/MM/dd" value-format="yyyy/MM/dd" v-model="editForm.zicha3"
                  type="date"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检查人" class="cyqlabel">
                <el-input size="small" v-model="editForm.zicha4"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="fuwukab">自查车辆登记表明细列表</div>
          <el-button type="primary" icon="el-icon-delete" style="float: right; margin-bottom: 15px;  margin-right: 5px;">删除</el-button>
          <el-button type="primary" icon="el-icon-tickets" style="float: right; margin-bottom: 15px; margin-right: 5px;">新建</el-button>
          <el-table :data="tabledataq" size="mini" border stripe header-row-class-name="textcenter">
            <el-table-column label="检查日期" fixed="left" prop="a1">
            </el-table-column>
            <el-table-column label="车牌号" prop="a2">
            </el-table-column>
            <el-table-column label="检查地点" prop="a3">
            </el-table-column>
            <el-table-column label="着装仪表" prop="a4">
            </el-table-column>
            <el-table-column label="门徽" prop="a5">
            </el-table-column>
            <el-table-column label="外表卫生" prop="a6">
            </el-table-column>
            <el-table-column label="天花脸破碎" prop="a7">
            </el-table-column>
            <el-table-column label="无其他宣传品" prop="a8">
            </el-table-column>
            <el-table-column label="车内卫生" prop="a9">
            </el-table-column>
            <el-table-column label="顶灯" prop="a10">
            </el-table-column>
            <el-table-column label="计价器" prop="a11">
            </el-table-column>
            <el-table-column label="报话器" prop="a12">
            </el-table-column>
            <el-table-column label="座套" prop="a13">
            </el-table-column>
            <el-table-column label="营运证" prop="a14">
            </el-table-column>
            <el-table-column label="资格证" prop="a15">
            </el-table-column>
            <el-table-column label="监督卡" prop="a16">
            </el-table-column>
            <el-table-column label="营运标志" prop="a17">
            </el-table-column>
            <el-table-column label="租价条" prop="a18">
            </el-table-column>
            <el-table-column label="纳税情况" prop="a19">
            </el-table-column>
            <el-table-column label="驾驶员" prop="a20">
            </el-table-column>
            <el-table-column label="备注" prop="a21">
            </el-table-column>
          </el-table>
          <div style="text-align:center;margin-top:6px;">
            <el-button type="primary" @click="">确认</el-button>
            <el-button type="primary" @click="">上报</el-button>
            <el-button type="info" size="small" @click="dialogVisible=false">取消</el-button>
          </div>
        </el-scrollbar>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        tabledata: [
          {
              a1: '2018-10',
              a2: '2018-10-10',
              a3: '西安交通大队',
              a4: '刘于海',
              a5: '330',
          },
          {
              a1: '2018-11',
              a2: '2018-11-10',
              a3: '西安交通大队',
              a4: '王宁',
              a5: '230',
          },
          {
              a1: '2018-12',
              a2: '2018-12-10',
              a3: '西安交通大队',
              a4: '刘子螚',
              a5: '130',
          },
        ],
        tabledataq: [
          {
              a1: '2018-11-10',
              a2: '陕A12391',
              a3: '西安交通大队',
              a4: '暂无',
              a5: '暂无',
              a6: '暂无',
              a7: '暂无',
              a8: '暂无',
              a9: '暂无',
              a10: '暂无',
              a11: '暂无',
              a12: '暂无',
              a13: '暂无',
              a14: '暂无',
              a15: '暂无',
              a16: '暂无',
              a17: '暂无',
              a18: '暂无',
              a19: '暂无',
              a20: '丁建国',
              a21: '暂无',
          },
        ],
        page: {
          now: 1,
          pagesize: 10,
          sizes: [2, 10, 20, 50, 100],
          total: 0,
          key: ''
        },
        form: {
          yue: '',
          ming: ''
        },
        editForm: {
          zicha1: '',
          zicha2: '',
          zicha3: '',
          zicha4: '',

        }
      }
    },
    methods: {
      //分页
      handleSizeChange(pagesize) {
        this.page.pagesize = pagesize;
        this.search(true, true);
      },
      handleCurrentChange(pageno) {
        this.page.now = pageno;
        this.search(true, true);
      }

    }
  }
</script>

<style>

  .public-common .el-form-item .el-input {
    width: 100%;
  }

  .public-title,
  .fuwukab {
    line-height: 30px;
    background-color: #deecfd;
    padding: 0 10px;
    margin-bottom: 20px;
    color: #15428F
  }

  .el-scrollbar__wrap {
    margin: 0 !important;
  }

  .el-dialog__body {
    padding: 10px 20px;
  }
</style>
